<template>
  <el-dialog @close="handleClose" :close-on-click-modal="false" :destroy-on-close="true" :visible="showSetting" append-to-body title="排班信息" width="1000px">
    <el-divider content-position="center">专家排班信息</el-divider>
    <div class="calendar">
      <div class="calendar-container">
        <button class="more-dates" @click="addMoreDates">更多日期</button>
<!--        <div class="calendar-header">-->
<!--          <div class="header-day">日期</div>-->
<!--        </div>-->

        <div class="calendar-grid">
          <div
            v-for="(date, index) in calendarDates"
            :key="index"
            :class="{
          'selected': selectedDate === date.dateStr,
          'disabled': date.isPast && (date.weekday === 1 || date.weekday === 2), // 禁用过去的周一和周二
          'today': isToday(date.date)
        }"
            class="calendar-day"
            @click="handleDateClick(date)"
          >
            <div class="alreadySchedul">已排班</div>
            <div class="day-number">{{ date.day }}</div>
            <div class="day-week">{{ weekDays[date.weekday] }}</div>
          </div>
        </div>
        <div v-if="selectedDate" class="time-slots">
          <h3>选择时间点 ({{ selectedDate }})</h3>
          <div @click="handleTime(time)" v-for="time in timeSlots" :key="time" :class="toggleArray(time)?'time-slot':'time-slot-select'">
            {{ time }}
          </div>
        </div>
      </div>
    </div>
                <div  style="margin:20px auto 20px;display: flex;justify-content: end;max-width: 800px;padding: 0 20px">
<!--                    <el-button type="primary" >新增排班</el-button>-->
                    <el-button  type="success">提交排班</el-button>
                </div>
  </el-dialog>
</template>

<script>
const ORIGINAL_THEME = '#409EFF' // default color

export default {
  props:['showSetting'],
  data() {
    return {
      baseDate: new Date(), // 基准日期（今天）
      visibleDays: 7,       // 初始显示天数
      selectedDate: null,   // 选中的日期
      timeSlots: [          // 时间点
        '09:00-10:00',
        '10:00-11:00',
        '11:00-12:00',
        '13:00-14:00',
        '14:00-15:00',
        '15:00-16:00',
        '16:00-17:00'
      ],
      selectDateTime:[],//选中的时间
      selectDateTimeCopy:[
        {
          scheduleDate:'',
          selectDateTime:[],
          startScheduleTime:'',
          endScheduleTime:''
        }
      ],
      weekDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    }
  },
  computed: {
    calendarDates() {
      return this.generateCalendarDates(this.baseDate, this.visibleDays);
    }
  },
  watch: {


  },
  created() {

  },
  methods: {
    // 生成日历日期
    generateCalendarDates(startDate, dayCount) {
      const dates = [];
      const currentDate = new Date(startDate);

      for (let i = 0; i < dayCount; i++) {
        const date = new Date(currentDate);
        date.setDate(currentDate.getDate() + i);

        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const weekday = date.getDay(); // 0是周日，1是周一，...，6是周六

        // 判断是否是过去的时间
        const isPast = date < new Date();

        dates.push({
          date: date,
          dateStr: `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
          day: day,
          month: `${month}月`,
          isPast: isPast,
          weekday: weekday // 0-6 (周日-周六)
        });
      }

      return dates;
    },
    //选择时间段（多选）
    handleTime(time){
      this.selectDateTime = this.toggleArrayElement(this.selectDateTime,time)
    },
    // 添加更多日期
    addMoreDates() {
      this.visibleDays += 7;
    },

    // 处理日期点击
    handleDateClick(date) {
      if (!date.isPast || date.weekday >= 3) { // 不是过去的时间，或者虽然是过去的时间但不是周一或周二
        this.selectedDate = date.dateStr;
        console.log(this.selectedDate)
        this.selectDateTimeCopy
      }
    },

    // 判断是否是今天
    isToday(date) {
      const today = new Date();
      return date.getFullYear() === today.getFullYear() &&
        date.getMonth() === today.getMonth() &&
        date.getDate() === today.getDate();
    },
    toggleArrayElement(array, element) {
      const index = array.indexOf(element);
      if (index === -1) {
        // 元素不存在于数组中，添加它
        return [...array, element];
      } else {
        // 元素存在于数组中，删除它
        return array.filter((item, i) => i !== index);
      }
    },
    toggleArray(element) {
      const index = this.selectDateTime.indexOf(element);
      if (index === -1) {
        return true;
      } else {
        return false;
      }
    },
    handleClose(){
      this.$emit('closeDialog', false)
    }
  }
}
</script>

<style scoped>
.calendar{
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
}
.calendar-container {
  font-family: Arial, sans-serif;
  max-width: 800px;

  margin: 0 auto;
  padding:10px 20px;
}

.calendar-header {
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}

.header-day {
  padding: 10px;
}
.alreadySchedul{
  position: absolute;
  top: -22px;
  right: -39px;
  width: 60px;
  padding: 10px 8px 2px 8px;
  background-color:#f5f5f5;
  color: #707070;
  text-align: center;
  transform: rotate(45deg);
  transform-origin: left top;
  font-size: 10px;
  box-shadow: -1px 1px 3px rgba(0,0,0,0.2);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-day {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.calendar-day:hover:not(.disabled) {
  background-color: #f5f5f5;
}

.calendar-day.selected {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.calendar-day.disabled {
  color: #ccc;
  background-color: #f9f9f9;
  cursor: not-allowed;
  opacity: 0.6;
}

.calendar-day.today {
  border: 2px solid #1890ff;
}

.day-number {
  font-size: 18px;
  font-weight: bold;
}

.day-week {
  font-size: 14px;
  color: #666;
}

.more-dates {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin:0 0 20px 0;
}

.more-dates:hover {
  background-color: #40a9ff;
}

.time-slots {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.time-slot {
  padding: 10px;
  margin-bottom: 8px;
  background-color: #f5f5f5;
  color: #707070;
  border-radius: 4px;
  cursor: pointer;
}
.time-slot-select{
  padding: 10px;
  margin-bottom: 8px;
  background-color: #1890ff;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
}
</style>
